<template>
	<div>
		<ma-body>
			<ma-refresh slot="content" :refresh="false">
				<html2canvas class="canvas" ref="canvas" :domId="domId" @renderFinish="renderFinish">
					<view id="poster">
						<div class="top-box">
							<div class="name-box" style="display: flex;align-items: center;">
								<img src="../../static/img/jiugeLogo.png" class="logo-img"></img>
								<p class="top-box-name">九歌灵藏</p>
							</div>
							<img class="top-box-cover" src="@/static/img/invite.jpg" mode="aspectFill"></img>
							<div class="line-box">
								<div class="dashed"></div>
							</div>
							<div class="qrcode-box">
								<div class="flex-column">
									<span>九歌灵藏</span>
									<p>人人都是数字艺术收藏家，快来搭建你的数字藏馆吧！</p>
								</div>
								<img class="qrcode-img" :src="qrcodeImg" mode=""></img>
							</div>
						</div>
					</view>
				</html2canvas>
				<div class="big-box">
					<image src="../../static/img/mineBg.jpg" mode="aspectFill"
						style="width: 100vw;height: 32vw;position: absolute;top: 0;"></image>
					<image src="../../static/img/mineBorder.png" mode="aspectFill"
						style="width: 19.73vw;height: 21.33vw;position: absolute;top: 21.6vw;left: 40vw;z-index: 11;overflow: hidden;"  @tap="toPersonHome">
					</image>
					<!-- 个人信息 -->
					<div class="header-box">
						<!-- <image src="../../static/img/mineHeaderBg.png" mode="aspectFill" style="width: 19.73vw;height: 21.33vw;position: absolute;top: 21.6vw;left: 40vw;z-index: 11;"></image> -->
						<image :src="headerImg" mode="aspectFill" class="header-img" @tap.stop="toPersonHome"></image>
						<span class="jiu-font32-fff">{{ nickname }}</span>
						<span class="jiu-font24-555">ID：{{ user.info.uuid }}</span>
					</div>
					<!-- 我的灵石 -->
					
					<!-- <div class="myStone-box" @tap="toStoneMall">
						<div class="center">
							<image src="../../static/img/gashaponImg/stone.png" mode="aspectFill" class="left-icon"></image>
							<span class="jiu-font28-fff">灵石：{{ user.myWallet.signCoins || 0 }}</span>
						</div>
						<div class="center">
							<span class="jiu-font28-ffc" style="color: #A972FF;">集灵石，兑数藏</span>
							<image src="../../static/img/enter16.png" mode="aspectFill" class="enter-img"></image>
						</div>
					</div> -->
					
					<!-- 藏品tag列表 -->
					<div class="indent-box">
						<div v-for="item in indentList" class="indent" @tap="onJump(item.tap)">
							<image :src="item.icon" mode="aspectFill" class="indent-img"></image>
							<span class="jiu-font28-fff"
								style="font-weight: 300;text-align: center;font-size: 3.2vw;">{{ item.name }}</span>
						</div>
					</div>
					
					<div class="btn-box" @tap="onExchange">
						<span class="left center">
							<image src="@/static/img/exchangeIcon.png" mode="aspectFill" class="left-icon"></image>
							<label class="jiu-font28-fff">兑换码</label>
						</span>
						<image src="../../static/img/enter16.png" mode="aspectFill" class="enter-img"></image>
						</span>
					</div>
					
					<div class="btn-box" @tap="coupon">
						<span class="left center">
							<image src="@/static/img/coupon.png" mode="aspectFill" class="left-icon"></image>
							<label class="jiu-font28-fff">优惠券</label>
						</span>
						<image src="../../static/img/enter16.png" mode="aspectFill" class="enter-img"></image>
						</span>
					</div>
					
					<div class="btn-box" @click="onSign">
						<span class="left center">
							<image src="../../static/img/share.png" mode="aspectFill" class="left-icon"></image>
							<label class="jiu-font28-fff">签到</label>
						</span>
						<span class="center">
							<label class="jiu-font28-fff" style="font-weight: 300;color: #FFCE80;">连续签到领专属数藏</label>
							<image src="../../static/img/enter16.png" mode="aspectFill" class="enter-img"></image>
						</span>
					</div>
					
					<div class="btn-box" @tap="toPerson">
						<span class="left center">
							<image src="../../static/img/personCenter.png" mode="aspectFill" class="left-icon"></image>
							<label class="jiu-font28-fff">个人中心</label> 
						</span>
						<image src="../../static/img/enter16.png" mode="aspectFill" class="enter-img"></image>
						</span>
					</div>

					<div class="btn-box" @click="onInvite">
						<span class="left center">
							<image src="../../static/img/share.png" mode="aspectFill" class="left-icon"></image>
							<label class="jiu-font28-fff">邀请好友</label>
						</span>
						<span class="center">
							<label class="jiu-font28-fff" style="font-weight: 300;color: #FFCE80;"></label>
							<image src="../../static/img/enter16.png" mode="aspectFill" class="enter-img"></image>
						</span>
					</div>

					<div class="btn-box" @tap="toH('ptjs')">
						<span class="left center">
							<image src="../../static/img/aboutMe.png" mode="aspectFill" class="left-icon"></image>
							<label class="jiu-font28-fff">平台介绍</label>
						</span>
						<image src="../../static/img/enter16.png" mode="aspectFill" class="enter-img"></image>
					</div>

					<div class="btn-box" @tap="toH(('lxwm'))">
						<span class="left center">
							<image src="../../static/img/kefu.png" mode="aspectFill" class="left-icon"></image>
							<label class="jiu-font28-fff">联系我们</label>
						</span>
						<image src="../../static/img/enter16.png" mode="aspectFill" class="enter-img"></image>
					</div>
				</div>
				<div class="btn-box" style="background-color: #000000;padding-top: 0;" v-if="user.myInfo.user.blockIdAddress || ''">
					<span class="jiu-font24-555" style="display: flex;">
						<label>区块链地址：</label>
						<label style="width: 35vw;overflow: hidden;text-overflow: ellipsis;display: block;">{{ user.myInfo.user.blockIdAddress || '' }}</label>
					</span>
					<image src="../../static/img/fuzhi.png" mode="aspectFill" class="enter-img"
						@tap="fuzhi(user.myInfo.user.blockIdAddress || '')"></image>
				</div>
				<div style="display: flex;flex-direction: column;justify-content: center;margin-top: 10vw;">
					<span class="jiu-font24-555" style="text-align: center;">Copyright &copy; 2022</span>
					<span class="jiu-font24-555" style="text-align: center;">九歌（广州）文化科技有限公司 </span>
					<span class="jiu-font24-555" style="text-align: center;" @tap="toBei">粤ICP备2022094854号</span>
					<!-- <span class="jiu-font24-555" style="text-align: center;">联系方式 17688486610</span> -->
				</div>
			</ma-refresh>
		</ma-body>
		<div class="mask" v-if="show" @tap="show = false">
			<image src="@/static/img/isBack.png" mode="aspectFill" class="backImg" @tap.stop="show = false"></image>
			<div class="modal">
				<image class="canvasImg" :src="canvasImg" mode="widthFix" @tap.stop="show = true"></image>
				<div class="button-box">
					<div class="flex-row">
						<div class="flex-column" @tap.stop="save">
							<image src="@/static/img/save.png" mode=""></image>
							<span>长按上图保存图片</span>
						</div>
						<div class="flex-column" @tap="onCopy">
							<image src="@/static/img/copy.png" mode=""></image>
							<span>复制链接</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<exchangeModel ref="onExchangeModel"></exchangeModel>
	</div>
</template>

<script>
	import {
		base64ToPath,
		pathToBase64
	} from '@/components/html2canvas/image-tools.js';
	import exchangeModel from '@/components/exchange-model/exchange-model';
	export default {
		components: {
			exchangeModel
		},
		data() {
			return {
				indentList: [{
						name: '我的藏品',
						icon: '/static/img/cangping.png',
						tap: 'myCollection'
					},
					{
						name: '我的订单',
						icon: '/static/img/dindan.png',
						tap: 'order'
					},
					{
						name: '优先购', 
						icon: '/static/img/first.png',
						tap: 'priorityBuy'
					},
					{
						name: '我的背包', 
						icon: '/static/img/bag.png',
						tap: 'myBug'
					}
				],
				coverImg: '',
				avatar: '', 
				domId: '',
				canvasImg: '',
				show: false,
				qrcodeImg: '',
				nickname: '',
				headerImg: '',
				baseUrl: [],
				askCodeSelf: '',
				avtivityInfo: null,
			}
		},
		methods: {
			toPersonHome(){
				this.$ma.route.personHome({
					homeType: 'my'
				})
			},
			toBei(){
				window.location.href = "http://www.beian.miit.gov.cn/"
			},
			save(){
				uni.showToast({
					icon: 'none',
					title: '请长按上图保存图片'
				});
				return;
			},
			getShareUrl() {
				if(!this.askCodeSelf) return
				let baseUrl = 'https://www.jiugemeta.com/#/pages/registered/registered';
				// let baseUrl = 'http://localhost:8080/#/pages/registered/registered';
				let query = `?loginType=registerLogin&askCode=${this.askCodeSelf}`;
				return baseUrl + query;
			},
			//生成二维码图片 
			async getQrcode() {
				if (this.qrcodeImg) return;
				let res = await this.$u.api.getQrcode({
					content: this.getShareUrl()
				})
				console.log('153454', res)  
				this.qrcodeImg = res.msg;
			},
			async onInvite() {
				this.$u.api.getActivityInfo().then(async res=>{
					if(res.id){
						this.$ma.route.inviteEvents();
					} else if(res.data == null) {
						if (this.canvasImg) this.show = true;
						else {
							await this.getQrcode();
							uni.showLoading({
								title: '生成中...'
							})
							await this.$refs.canvas.create(this.domId);
							setTimeout(() => { 
								uni.hideLoading()
								this.show = true;
							}, 500)
						}
					}
				})
				
				
			},
			onSign(){
				uni.showToast({
					icon: 'none',
					title: '敬请期待'
				});
				return;
				this.$ma.route.signIn()
			},
			toPerson() {
				// uni.showToast({
				// 	icon: 'none',
				// 	title: '敬请期待'
				// });
				// return;
				this.$ma.route.personCenter()
			},
			toStoneMall(){
				uni.showToast({
					icon: 'none',
					title: '敬请期待'
				});
				return;
				this.$ma.route.stoneMall()
			},
			coupon(){
				// uni.showToast({
				// 	icon: 'none',
				// 	title: '敬请期待'
				// })
				// return;
				this.$ma.route.coupon({
					couponType: 'my'
				});
			},
			onJump(onTap) {
				 // || onTap == 'priorityBuy'
				if (onTap == 'myBug' ||  onTap == 'firstShop' ) return uni.showToast({
					icon: 'none',
					title: '敬请期待'
				})
				this.$ma.route[onTap]()
			},
			fuzhi(data) {
				uni.setClipboardData({
					data: data,
					success: function(data) {
						uni.showToast({
							icon: 'none',
							title: '复制成功'
						})
					}
				})
			},
			toH(type) {
				let href;
				if (type == 'lxwm') {
					window.location.href = this.$val('txt:contact:us');
				} else {
					window.location.href = this.$val('txt:platform:introduction');
				}

			},
			getBase() {
				this.$u.api.getBase().then(res => {
					this.baseUrl = res;
				})
			},
			onCopy() {
				this.fuzhi(this.getShareUrl());
			},
			renderFinish(filePath) {
				this.canvasImg = filePath;
			},
			onExchange(){
				this.$refs.onExchangeModel.open()
			},
		},
		async onLoad() {
			if(this.user.myInfo){
				this.askCodeSelf = this.user.myInfo.user.askCodeSelf;
			}
			await this.getBase();
		},
		mounted() {
			this.domId = '#poster';
		},
		onShow() {
			this.$store.dispatch('user/getMyInfo');
			if (this.user.myInfo.user) {
				this.headerImg = this.user.myInfo.user.avatar;
				this.nickname = this.user.myInfo.user.nickname;
			} 
			this.$store.dispatch('user/getMyWallet');
		}
	}
</script>

<style lang="scss">
	/deep/.safeBottom{
		height: 3.2vw !important;
	}
	.enter-img {
		width: 4.27vw;
		height: 4.27vw;
	}

	.btn-box {
		margin: 2.67vw 4.27vw;
		margin-bottom: 0;
		padding: 3.73vw 4.27vw;
		background-color: #1B1B1B;
		border-radius: 6.4vw;
		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.left-icon {
		width: 6.4vw;
		height: 6.4vw;
		margin-right: 2.13vw;
	}

	.center {
		display: flex;
		align-items: center;
	}

	.indent-box {
		margin-top: 6.4vw;
		margin-bottom: 3.73vw;
		padding: 0 8.53vw;
		display: flex;
		justify-content: space-between;

		.indent {
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.indent-img {
			width: 12.8vw;
			height: 12.8vw;
			display: block;
			margin-bottom: 1.07vw;
		}
	}

	.big-box {
		display: flex;
		flex-direction: column;
		background-color: #000000;
		padding-top: 21.6vw;
		position: relative;

		.header-box {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.header-img {
				width: 19.24vw;
				height: 20.8vw;
				z-index: 9;
				// border-top-left-radius: 138px 303px;
				// border-top-right-radius: 232px 180px;
				// border-bottom-left-radius: 238px 121px;
				// border-bottom-right-radius: 195px 217px;
				// border-color: red;
				clip-path: polygon(50% 0, 97% 24%, 98% 76%, 50% 108%, 0 75%, 0 25%);
			}

			.jiu-font32-fff {
				margin-top: 2.4vw;
			}

		}

		.myStone-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 6.4vw 4.27vw;
			margin-bottom: 0;
			background-color: #1B1B1B;
			padding: 3.73vw 4.27vw;
			border-radius: 6.4vw;
		}


	}

	#poster {
		width: 82.93vw;
		// height: 128.27vw;
		border-radius: 6.4vw;
		background-color: #1B1B1B;
		margin-left: 8.53vw;

		.img-box {
			width: 100%;
			padding: 2.13vw 2.13vw 0;
			height: 85.07vw;
			position: relative;
			border-radius: 6.4vw;

			.logo {
				width: 100%;
				height: 100%;
				border-radius: 6.4vw;
			}

			.num-box {
				display: flex;
				align-items: center;
				height: 4.27vw;
				background-color: #323232;
				border-radius: 1.07vw;
				position: absolute;
				left: 4.27vw;
				bottom: 6.4vw;

				&-left {
					width: 8.8vw;
					height: 100%;
					font-size: 3.47vw;
					border-radius: 1.07vw;
					display: flex;
					align-items: center;
					justify-content: center;
					background: linear-gradient(270deg, #FFCE80 0%, #A972FF 100%);
					font-weight: 900;
				}

				&-right {
					font-size: 2.67vw;
					color: #FFCE80;
					padding: 0.27vw 1.07vw;
				}
			}
		}

		.bottom-box {
			width: 100%;
			padding: 4.27vw 6.4vw;

			.top {
				display: flex;
				align-items: center;
				height: 11.2vw;

				.gradient {
					width: 1.07vw;
					height: 11.2vw;
					background: linear-gradient(180deg, #A972FF 0%, #FFCE80 100%);
					border-radius: 12.8vw;
					margin-right: 2.14vw;
				}

				.column {
					display: flex;
					align-items: flex-start;
					flex-direction: column;
					justify-content: space-between;

					.title {
						font-size: 4.27vw;
						color: #FFF;
						font-weight: 500;
						margin-bottom: 1.07vw;
					}

					.tag {
						font-size: 2.67vw;
						color: #A972FF;
						border: 1px solid #A972FF;
						border-radius: 1.07vw;
						padding: 0.27vw 1.07vw;
					}
				}
			}

			.line {
				padding: 4.27vw 0;
				width: 82.93vw;
				// overflow: hidden;
				position: relative;
				left: -6.4vw;

				&:after {
					content: '';
					height: 4.27vw;
					width: 4.27vw;
					border-radius: 50%;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translate(-50%, -50%);
					background-color: #000;
				}

				&:before {
					content: '';
					height: 4.27vw;
					width: 4.27vw;
					border-radius: 50%;
					position: absolute;
					right: 0;
					top: 50%;
					transform: translate(50%, -50%);
					background-color: #000;
				}

				.dashed {
					background: linear-gradient(to left,
							transparent 0%,
							transparent 50%,
							#000 50%,
							#000 100%);
					background-size: 18px 1px;
					background-repeat: repeat-x;
					width: 100%;
					height: 1px;
				}
			}

			.bottom {
				display: flex;

				// align-items: center;
				// justify-content: space-between;
				&-column {
					flex: 1;
					flex-direction: column;
					overflow: hidden;
					margin-right: 4vw;

					.row {
						display: flex;
						align-items: center;

						.nickname {
							font-size: 3.73vw;
							font-weight: 500;
							color: #aaa;
						}

						.label {
							font-size: 2.67vw;
							color: #FFCE80;
							border: 1px solid #FFCE80;
							border-radius: 1.07vw;
							padding: 0.27vw 1.33vw;
							margin-left: 1.07vw;
						}
					}

					p {
						font-size: 3.2vw;
						color: #535353;
						margin-top: 0.53vw;
					}
				}

				.avatar {
					transform: scale(2);
					height: 7.5vw;
					width: 7.5vw;
					border-radius: 2.13vw;
					background-color: #BBB;
				}
			}
		}
	}

	.canvas {
		position: absolute;
		left: 99999;
	}

	.canvasImg {
		// transform: scale(2);
		width: 85vw;
		display: block;
		// margin-bottom: 3.73vw;
		margin-bottom: 10.67vw;
		border-radius: 6.4vw;
		z-index: 111;
		position: absolute;
		top: 20vw;
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		height: 100vh;
		width: 100vw;
		background-color: #000;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;


		.modal {
			display: flex;
			flex-direction: column;
			align-items: center;

			.button-box {
				padding-top: 4.27vw;
				border-radius: 6.4vw 6.4vw 0 0;
				background-color: #1B1B1B;
				width: 100%;
				display: flex;
				flex-direction: column;

				.flex-row {
					display: flex;
					align-items: center;
					padding: 0 14.93vw;
					justify-content: space-between;
					padding-top: 2.13vw;
					padding-bottom: calc(4.27vw + constant(safe-area-inset-bottom));
					padding-bottom: calc(4.27vw + env(safe-area-inset-bottom));
				}

				.flex-column {
					display: flex;
					flex-direction: column;
					align-items: center;

					image {
						height: 14.93vw;
						width: 14.93vw;
					}

					span {
						font-size: 3.2vw;
						color: #FFF;
						margin-top: 1.33vw;
					}
				}

				.cancel-box {
					width: 100%;
					box-sizing: content-box;
					height: 17.07vw;
					padding-bottom: constant(safe-area-inset-bottom);
					padding-bottom: env(safe-area-inset-bottom);
					display: flex;
					align-items: center;
					justify-content: center;

					.cancel-button {
						width: 89.33vw;
						height: 12.8vw;
						font-size: 3.73vw;
						color: #555;
						background-color: #000;
						border-radius: 6.4vw;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
	}

	.top-box {
		border-radius: 6.4vw;
		width: 82.93vw;
		background-color: #1B1B1B;
		display: flex;
		flex-direction: column;
		align-items: center;

		.name-box {
			height: 10.93vw;
			width: 100%;
			display: flex;
			align-items: center;
			padding: 0 6.4vw;

			.logo-img {
				width: 4.27vw;
				height: 4.27vw;
				margin-right: 2.13vw;
				display: block;
			}

			span {
				height: 4.27vw;
				width: 4.27vw;
				background: linear-gradient(180deg, #FFCE80 0%, #A972FF 100%);
				border-radius: 50%;
				display: block;
				margin-right: 2.13vw;
			}

			.top-box-name {
				font-size: 3.2vw;
				color: #bbb;
			}
		}

		&-cover {
			height: 74.4vw;
			width: 74.4vw;
			display: block;
			background-color: #BBB;
			border-radius: 6.4vw;
		}

		.line-box {
			padding-top: 4.27vw;
			width: 100%;
			// overflow: hidden;
			position: relative;

			&:after {
				content: '';
				height: 4.27vw;
				width: 4.27vw;
				border-radius: 50%;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translate(-50%, -50%);
				background-color: #000;
			}

			&:before {
				content: '';
				height: 4.27vw;
				width: 4.27vw;
				border-radius: 50%;
				position: absolute;
				right: 0;
				top: 50%;
				transform: translate(50%, -50%);
				background-color: #000;
			}

			.dashed {
				background: linear-gradient(to left,
						transparent 0%,
						transparent 50%,
						#000 50%,
						#000 100%);
				background-size: 16px 1px;
				background-repeat: repeat-x;
				width: 100%;
				height: 1px;
			}
		}

		.qrcode-box {
			display: flex;
			align-items: center;
			padding: 4.27vw 4.27vw 4.27vw 6.4vw;

			.flex-column {
				flex: 1;
				display: flex;
				flex-direction: column;

				span {
					font-size: 3.73vw;
					color: #AAA;
				}

				p {
					font-size: 3.2vw;
					color: #535353;
					margin-top: 0.53vw;
				}
			}

			.qrcode-img {
				width: 14.93vw;
				height: 14.93vw;
				border-radius: 2.13vw;
				background-color: #BBB;
			}
		}
	}
</style>
